<template>
  <div class="headbankbox">
    <div class="headbox">
      <p>萌度</p>
      <p>show</p>
    </div>
  </div>
  <div class="bodybox">
    <div class="login">
      <button
        :class="'dl ' + (type === 1 ? 'but-active' : '')"
        @click="selType(1)"
      >
        登录
      </button>
      <button
        :class="'dl ' + (type === 2 ? 'but-active' : '')"
        @click="selType(2)"
      >
        注册
      </button>

      <p>手机号</p>
      <input type="text" v-model="form.phone" />
      <p>密码</p>
      <input type="password" v-model="form.password" />
      <p v-if="type === 2">确认密码</p>
      <input v-if="type === 2" type="password" v-model="form.passwordConfirm" />
      <p>验证码</p>
      <div style="position: relative">
        <input type="text" v-model="form.smsCode" />
        <div class="sms-but" @click="sendSmsCode">获取验证码</div>
      </div>
      <!--      <input class="submit" type="submit" value="获取验证码" />-->
      <button class="dlan" @click="handleSubmit">
        {{ type === 1 ? "立即登录" : "立即注册" }}
      </button>
    </div>
    <div class="footbox">
      <img src="../imges/foot.png" width=" 70px" height=" 60px" alt="" />
    </div>
    <div class="circlebox">
      <div class="bigbox">
        <div class="smallbox"></div>
      </div>
    </div>
    <div class="newbox">
      <img src="../imges/new.png" width=" 80px" height=" 126px" alt="" />
    </div>
  </div>
  <!--  <div class="bottom"></div>-->
</template>

<script>
export default {
  data() {
    return {
      type: 1, //1登录 2注册
      smsCode: "",
      form: {
        phone: "",
        password: "",
        passwordConfirm: "", //注册-确认密码
        smsCode: "",
      },
    };
  },
  mounted() {},
  methods: {
    selType(index) {
      //切换类型 1登录 2注册
      if (index === this.type) {
        return;
      }
      this.type = index;
      this.resetFields();
    },
    sendSmsCode() {
      //发送验证码
      if (this.form.phone.trim() === "") {
        alert("请输入手机号");
        return;
      }
      this.smsCode = "1234";
      console.info("发送验证码，为：" + this.smsCode);
      alert("验证码已发送");
    },
    resetFields() {
      //重置属性
      this.smsCode = "";
      this.form = {
        phone: "",
        password: "",
        passwordConfirm: "", //注册-确认密码
        smsCode: "",
      };
    },
    handleSubmit() {
      //提交
      if (this.form.phone.trim() === "") {
        alert("请输入手机号");
        return;
      }
      if (this.form.password.trim() === "") {
        alert("请输入密码");
        return;
      }
      if (this.type === 2 && this.form.passwordConfirm.trim() === "") {
        alert("请再次输入密码");
        return;
      }
      if (this.type === 2 && this.form.password !== this.form.passwordConfirm) {
        alert("两次输入密码不一致，请重新输入");
        return;
      }
      if (this.smsCode.trim() === "") {
        alert("请获取验证码");
        return;
      }
      if (this.form.smsCode.trim() === "") {
        alert("请输入验证码");
        return;
      }
      if (this.form.smsCode.trim() !== this.smsCode) {
        alert("验证码错误，请重新输入");
        return;
      }
      if (this.type === 1) {
        //登录
        this.handleLogin();
      } else if (this.type === 2) {
        //注册
        this.handleRegister();
      }
    },
    handleLogin() {
      //登录
      let that = this;
      that.userInfo = {};
      //获取所有用户-浏览器缓存
      let userList = localStorage.getItem("userList")
        ? JSON.parse(localStorage.getItem("userList"))
        : [];
      if (userList.length > 0) {
        let hadUser = false; //循环拼单是否存在用户
        userList.forEach((item, index) => {
          if (
            item.phone === that.form.phone &&
            item.password === that.form.password
          ) {
            hadUser = true;
            that.userInfo = item;
            //模拟登录用户 存到缓存
            localStorage.setItem("userInfo", JSON.stringify(that.userInfo));
            console.info("登录成功");
            that.$router.push({ path: "/navigationbar/HomePage" });
          } else if (index === userList.length - 1 && !hadUser) {
            alert("账号或密码错误");
          }
        });
      } else {
        alert("账号或密码错误");
      }
    },
    handleRegister() {
      //注册
      let that = this;
      //获取所有用户-浏览器缓存
      let userList = localStorage.getItem("userList")
        ? JSON.parse(localStorage.getItem("userList"))
        : [];
      let pass = true;
      if (userList.length === 0) {
        that.checkUseRegister(userList);
      } else {
        userList.forEach((item, index) => {
          if (pass) {
            if (item.phone === this.form.phone) {
              alert("手机号已被注册，请修改");
              pass = false;
            }
          }
          if (pass && index === userList.length - 1) {
            that.checkUseRegister();
          }
        });
      }
    },
    checkUseRegister(userList) {
      //注册
      //模拟注册用户 存到缓存
      let id = userList ? userList.length + 1 : 1; //递增id
      let userInfo = {
        id: id,
        phone: this.form.phone,
        password: this.form.password,
      };
      userList.push(userInfo);
      //用户列表 - 存储到缓存
      localStorage.setItem("userList", JSON.stringify(userList));
      alert("注册成功，请登录");
      this.selType(1); //切换登录
    },
  },
};
</script>

<style lang='less' scoped>
.but-active {
  border-bottom: 1px solid #ff8c00 !important;
}
.sms-but {
  position: absolute;
  right: 25px;
  top: 0;
  line-height: 50px;
  cursor: pointer;
}

* {
  margin: 0;
  padding: 0;
}
.headbankbox {
  width: 100%;
  height: 91px;
  background-color: rgba(255, 166, 0, 0.863);
  display: flex;
  align-items: flex-end;
}
.headbox {
  width: 100%;
  height: 45px;
  // background-color: red;
  p {
    text-align: center;
  }
}

.bodybox {
  width: 100%;
  height: 550px;
  background-color: rgba(255, 218, 185, 0.411);
  .login {
    margin-left: 50px;
    width: 300px;
    height: 380px;
    // background-color: red;
    .dl {
      // font-weight: 10px;
      font-size: 25px;
      // opacity: 0;
      margin-left: 31px;
      width: 100px;
      height: 50px;
      background-color: rgb(255, 240, 226);
      border: none;
    }
    .dlan {
      width: 280px;
      height: 50px;
      // background-color: babyblue;
      border: none;
      margin: 20px 0px 0px 0px;
      border-radius: 30px;
    }
    p {
      margin-left: 15px;
      margin-top: 5px;
      width: 300px;
      height: 40px;
    }
    input {
      width: 270px;
      height: 50px;
      border-radius: 30px;
      border: none;
      background-color: rgba(128, 128, 128, 0.377);
      /*text-align: right;*/
      padding-left: 10px;
    }
  }
}
.bottom {
  width: 100%;
  height: 65px;
  background-color: #ff8c00;
}
.footbox {
  margin-top: -380px;
  width: 80px;
  height: 80px;
  // background-color: red;
}
.newbox {
  width: 80px;
  height: 126px;
  /* background-color: red; */
  float: right;
  margin-top: -25px;
}
.circlebox {
  margin-top: 100px;
  width: 170px;
  height: 170px;
  // background-color: green;
  margin-left: -65px;

  .bigbox {
    width: 170px;
    height: 170px;
    background-color: #ffc097;
    border-radius: 100%;
    //将smallbox移动到底部
    display: flex;
    align-items: flex-end;

    .smallbox {
      width: 90px;
      height: 90px;
      background-color: #eb8a4a;
      border-radius: 100%;
      margin-left: 35px;
    }
  }
}
</style>
